<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.wrap{
				width:100%;
			}

			#left_menu{
				width: 30%;
				height: 100px;
				border: 3px solid gray;
				display: inline-block;
				vertical-align: top;
			}
			#right{
				width: 60%;a
				height: 667px;
				overflow: scroll;
				display: inline-block;
				vertical-align: top;
			}
		</style>
	</head>
	<body>
<div>hello world</div>
		<div class="wrap">
			<div id="left_menu">

			</div>
			<div id="right">

			</div>
		</div>
	</body>
	<script type="text/javascript">
	var city =
		[['东城','朝阳','海淀','昌平'],['长安','莲湖','雁塔','碑林','未央'],['玄武区','雨花台区','青龙街'],['长安','莲湖','雁塔','碑林','未央'],['长安','莲湖','雁塔','碑林','未央'],['长安','莲湖','雁塔','碑林','未央'],['长安','莲湖','雁塔','碑林','未央']]


	var mark = 0;
		var left_menu = document.getElementById('left_menu');
		var right = document.getElementById('right');
		for (var i = 1; i<= city.length;i++) {
			var p = document.createElement('a');
			p.index = i;
			p.href = '#mark'+ mark;
			p.style.display = 'inline-block';
			p.style.width="100%";
			p.style.height = '50px';
			p.style.fontSize = '30px';
			p.style.textAlign = 'center';
			p.style.lineHeight = '30px';
			p.style.border = '1px solid gray';
			p.innerText = '标签'+i;
			left_menu.appendChild(p);
			var array = city[i-1];
			var count = 1;

			for (var j = 0; j < array.length; j++) {
			var p = document.createElement('p');
			p.index = count;
			p.mark = mark;
			p.id = "mark"+mark;
			p.style.width="100%";
			p.style.height = '50px';
			p.style.fontSize = '30px';
			p.style.textAlign = 'center';
			p.style.lineHeight = '50px';
			p.style.border = '1px solid gray';
			p.innerText = array[j];
			right.appendChild(p);
			count++;
			p.onclick = function(){
				console.log(this.index);
			}
			count++;
			}
    mark++;
		}



	</script>
</html>
